<template>
  <div class="active-details-container">
    <el-card class="details-card">
      <template #header>
        <div class="card-header">
          <span>活动详情</span>
          <el-button @click="goBack" style="float: right; padding: 3px 0" type="primary" link>返回</el-button>
        </div>
      </template>
      
      <el-descriptions :column="1" border>
        <el-descriptions-item label="活动名称">{{ detailData.activityName }}</el-descriptions-item>
        <el-descriptions-item label="活动介绍">{{ detailData.activityIntroduce }}</el-descriptions-item>
        <el-descriptions-item label="报名开始时间">{{ detailData.signStartTime }}</el-descriptions-item>
        <el-descriptions-item label="报名结束时间">{{ detailData.signEndTime }}</el-descriptions-item>
        <el-descriptions-item label="活动开始时间">{{ detailData.activityStartTime }}</el-descriptions-item>
        <el-descriptions-item label="活动结束时间">{{ detailData.activityEndTime }}</el-descriptions-item>
        <el-descriptions-item label="是否需要保证金">
          <el-tag :type="detailData.ifBond === 1 ? 'success' : 'info'">
            {{ detailData.ifBond === 1 ? '需要' : '不需要' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item v-if="detailData.ifBond === 1" label="保证金金额">
          {{ detailData.bondMoney }}元
        </el-descriptions-item>
        <el-descriptions-item label="活动标签">{{ detailData.activityLabel }}</el-descriptions-item>
        <el-descriptions-item label="优惠方式">
          <el-tag :type="detailData.discountMode === 1 ? 'primary' : 'success'">
            {{ detailData.discountMode === 1 ? '满减' : '优惠券' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="优惠方案">
          <el-tag :type="detailData.discountProgramme === 1 ? 'warning' : 'danger'">
            {{ detailData.discountProgramme === 1 ? '叠加优惠' : '阶梯优惠' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="活动状态">
          <el-tag v-if="detailData.state === 0">报名未开始</el-tag>
          <el-tag type="warning" v-else-if="detailData.state === 1">报名进行中</el-tag>
          <el-tag type="primary" v-else-if="detailData.state === 2">活动待开始</el-tag>
          <el-tag type="success" v-else-if="detailData.state === 3">活动进行中</el-tag>
          <el-tag type="info" v-else-if="detailData.state === 4">活动已结束</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="商家数">{{ detailData.shopNumber }}</el-descriptions-item>
        <el-descriptions-item label="商品数量">{{ detailData.productNumber }}</el-descriptions-item>
      </el-descriptions>

      <!-- 活动图片 -->
      <el-card class="image-card" v-if="detailData.image" style="margin-top: 20px">
        <template #header>
          <div class="card-header">
            <span>活动图片</span>
          </div>
        </template>
        <el-image :src="detailData.image" fit="contain" style="width: 100%; height: 300px"></el-image>
      </el-card>

      <!-- 优惠详情 -->
      <el-card class="promotion-card" style="margin-top: 20px" v-if="detailData.promotionDetail && detailData.promotionDetail.length > 0">
        <template #header>
          <div class="card-header">
            <span>优惠详情</span>
          </div>
        </template>
        <el-table :data="detailData.promotionDetail" border>
          <el-table-column prop="fullMoney" label="满金额" width="150">
            <template #default="scope">
              {{ scope.row.fullMoney }}元
            </template>
          </el-table-column>
          <el-table-column prop="reduceMoney" label="减金额" width="150">
            <template #default="scope">
              {{ scope.row.reduceMoney }}元
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getSeckillDetail } from '@/api/active/active_seckill'

const route = useRoute()
const router = useRouter()

// 详情数据
const detailData = ref({
  activityId: 0,
  activityName: '',
  activityIntroduce: '',
  signStartTime: '',
  signEndTime: '',
  activityStartTime: '',
  activityEndTime: '',
  ifBond: 0,
  bondMoney: 0,
  activityLabel: '',
  discountMode: 1,
  discountProgramme: 1,
  image: '',
  state: 0,
  shopNumber: 0,
  productNumber: 0,
  promotionDetail: [] as any[]
})

// 获取详情数据
const getDetails = async () => {
  try {
    const res = await getSeckillDetail({ seckillId: Number(route.query.activityId) })
    detailData.value = res.data
  } catch (error) {
    console.error(error)
  }
}

// 返回
const goBack = () => {
  router.go(-1)
}

onMounted(() => {
  getDetails()
})
</script>

<style scoped lang="scss">
.active-details-container {
  padding: 20px;
  .details-card {
    .card-header {
      font-weight: bold;
    }
  }
  .image-card {
    .card-header {
      font-weight: bold;
    }
  }
  .promotion-card {
    .card-header {
      font-weight: bold;
    }
  }
}
</style>